<template>
	<view class="">
		<view class="mt24 pb24 bgf">
			<view class="nav p2432 br12">
				<view class="" v-if="shop">
					<view class="flex_btw">
						<view class="flex1 sn1 c3 fw600 fs30">{{shop.title}}</view>
						<view class="shop_btn bg2a7 cf fs26 flex_c ml20">到店消费</view>
					</view>
					<view class="mt16 c6 fs28 fw500">
						距您{{shop.distance}}m
						<text class="c2a7 ml12 fs24" @click="cutShop">切换门店</text>
					</view>
					<view class="mt24 flex_x" @click="shop_show = true">
						<image class="img32" src="/static/classify/gg.png" mode=""></image>
						<view class="flex1 mlr12 c9 fs24 sn1">{{shop.notice}}</view>
						<view class="flex_x">
							<view class="fs24 c9 mr10">门店信息</view>
							<u-icon name="arrow-down" color="##909090" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
				<view v-else class="c3 fs28 fw500 flex_c" style="height: 200rpx;" @click="getCity">授权位置，选择门店</view>
			</view>
		</view>


		<view class="bgf flex">
			<view class="left">
				<scroll-view scroll-y class="scroll_content left_content" :scroll-into-view='leftscrollinto'
					scroll-with-animation>
					<view class="let_time flex_c c3 fs32" :class="{'let_timea':index == active_left}"
						v-for="(item,index) in goods_list" @click="selectLeft(item,index)" :id="'left' + item.id">
						<image v-if="index == 0" class="img32 mr10" src="/static/classify/tj.png" mode=""></image>
						<view class="">{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="flex1 ml24 mr30">
				<scroll-view scroll-y class="scroll_content" @scroll="scrollright" :scroll-into-view="right_active"
					scroll-with-animation>

					<view class="" v-for="(item,index) in goods_list" :id='"floor" + item.id '>
						<view class="" id='right-item'>
							<view class="mt24 c3 fs32 pb32">{{item.name}}</view>
							<view class="" v-if='item.goods.length>0'>
								<view class="flex mb24" v-for="(itema,indexa) in item.goods"
									@click="selectLeft(item,index)">
									<image class="img180 br12" :src="itema.image_str" mode="">
									</image>
									<view class="ml20 flex1">
										<view class="c3 fs28 fw500 sn1">{{itema.title}}</view>
										<view class="c9 fs24 sn1 mt6">{{itema.description}}</view>

										<view class="mt28 c6 fs22 flex_x">
											<view class="">销量{{itema.sales}}</view>
											<!-- <view class="ml28">库存1234</view> -->
										</view>
										<view class="mt12 flex_btw">
											<view class="fs32 fw500 cfe4"><text class="fs24">￥</text>{{itema.price}}
											</view>
											<view class="box">
												<view class="" v-if="!itema.cart">
													<u-icon @click='addGoods(itema)' name="plus-circle-fill"
														color="#2A71C0" size="40rpx">
													</u-icon>
												</view>
												<view class="" v-else>
													<u-number-box v-model="itema.cart.num" bgColor='#fff'
														inputWidth='52rpx' @change="changeGoods(1,itema,$event)"
														@overlimit='overlimit(1,itema,$event)'>
														<view slot="minus" class="minus number_box">
															<u-icon name="minus-circle" size="40rpx" color='#2A71C0'>
															</u-icon>
														</view>
														<view class="">
															<u--input class="bgf" border="none"
																v-model="itema.cart.num">
															</u--input>
														</view>
														<view slot="plus" class="plus number_box">
															<u-icon name="plus-circle-fill" color="#2A71C0"
																size="40rpx">
															</u-icon>
														</view>
													</u-number-box>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="" v-else style="height: 320rpx;">
								<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text='该分类暂无商品'>
								</u-empty>
							</view>
						</view>
					</view>

				</scroll-view>
			</view>
		</view>

		<view class="balance  flex_btw">
			<view class="flex_x ml30">
				<view class="pr">
					<image @click="shopping" class="img56" src="/static/classify/gwc.png" mode=""></image>
					<view class="pa deg">
						<u-badge max="999" :value="cart.count"></u-badge>
					</view>
				</view>
				<view class="ml20 fs36 cfe4">￥{{priceAll}}</view>
			</view>
			<view class="balance_btn cf fs26 flex_c mr30" @click="clearing">结算</view>
		</view>

		<!-- 弹窗 -->
		<!-- 购物车 -->
		<u-transition :show="show" mode="fade">
			<view class="shopp_list" @click="show = false">
				<view class="shopp_lista" @click.stop="">
					<u-transition :show="show" mode="fade-up">

						<view class="p2432">
							<view class="flex_btw">
								<view class="c3 fw600 fs30">已选商品 (共{{cart.count}}件)</view>
								<view class="flex_x" @click.stop="carGoods">
									<image class="img32" src="/static/classify/del.png" mode=""></image>
									<view class="ml10 c9 fw600 fs24">清空</view>
								</view>
							</view>

							<view class="mt40">
								<scroll-view scroll-y class="scroll_shop">
									<view class="" v-if="cart.data.length>0">
										<view class="flex mb24" v-for="item in cart.data">
											<view class="">
												<image class="img120 br20" :src="item.goods.image_str" mode=""></image>
											</view>
											<view class="flex1 ml24">
												<view class="c3 fw600 fs28 sn1">{{item.goods.title}}</view>
												<view class="mt12 flex_btw">
													<view class="fs32 fw500 cfe4"><text
															class="fs24">￥</text>{{item.goods.price}}</view>
													<view class="">
														<u-number-box v-model="item.num" bgColor='#fff'
															inputWidth='52rpx' @change.stop="changeGoods(2,item,$event)"
															@overlimit.stop='overlimit(2,item,$event)'>
															<view slot="minus" class="minus number_box">
																<u-icon name="minus-circle" size="40rpx"
																	color='#2A71C0'>
																</u-icon>
															</view>
															<view class="">
																<u--input class="bgf" border="none" v-model="item.num">
																</u--input>
															</view>
															<view slot="plus" class="plus number_box">
																<u-icon name="plus-circle-fill" color="#2A71C0"
																	size="40rpx">
																</u-icon>
															</view>
														</u-number-box>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="" v-else>
										<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
											text='暂无商品'>
										</u-empty>
									</view>
								</scroll-view>
							</view>
						</view>
					</u-transition>
				</view>
			</view>

		</u-transition>

		<!-- 门店信息 -->
		<view class="">
			<u-popup :show="shop_show" closeable round="20rpx" @close="shop_show = false">
				<view class="p2432">
					<view class="tc c3 fw600 fs30">{{shop.title}}</view>
					<view class="mt40 c3 fw500 fs28">公告</view>
					<view class="mt12 c9 fw500 fs24">{{shop.notice}}</view>

					<view class="mt24 c3 fw500 fs28">门店信息</view>
					<view class="mt12 c9 fw500 fs24">营业时间：{{shop.workrange}}</view>
					<view class="mt12 c9 fw500 fs24">联系电话：{{shop.mobile}}</view>
					<view class="mt12 flex">
						<view class="c9 fw500 fs24 ">门店地址：{{shop.address}}{{shop.detailed}}</view>
						<view class="flex ml30 mt4">
							<image @click="navigationTel(1)" class="img24" src="/static/classify/map.png" mode="">
							</image>
							<image @click="navigationTel(2)" class="img24 ml20" src="/static/classify/tel.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 确认门店信息 -->
		<view class="">
			<u-popup :show="affirm_show" closeable round="20rpx" @close="affirm_show = false">
				<view class="p2432">
					<view class="tc c3 fw600 fs30">请确认门店信息</view>
					<view class="mt40 flex btw">
						<view class="c3 fw500  fs28 flex1 sn2">{{shop.title}}</view>
						<view class="ml40 c2a7 fw500 fs24">距离{{shop.distance}}m</view>
					</view>

					<view class="mt32 flex_btw">
						<view class="">
							<view class="flex_x">
								<image class="img32" src="/static/classify/dz.png" mode=""></image>
								<view class="ml12 c9 fw500 fs24">{{shop.address}}{{shop.detailed}}</view>
							</view>
							<view class="flex_x mt24">
								<image class="img32" src="/static/classify/phone.png" mode=""></image>
								<view class="ml12 c9 fw500 fs24">门店电话：{{shop.mobile}}</view>
							</view>
						</view>
						<view class="ml40 cut bg2a7 flex_c cf fs26" @click="cutShop">切换</view>
					</view>

					<view class="mt40 fw600 fs26 flex_x">
						<view class="affirm_btn affirm_btna bgf flex_c c6" @click="cutShop">更换门店</view>
						<view class="affirm_btn bg2a7 flex_c cf ml46" @click="affirm_show = false">确 定</view>
					</view>

				</view>
			</u-popup>
		</view>

		<u-loading-page :loading="isLoading" loadingText='切换身份中'></u-loading-page>

		<hintPopup :show.sync="del_show" hint='确认删除？' title='请确认是否删除加入的此商品？' color="#2A71C0" @confirm='confirm'>
		</hintPopup>

		<hintPopup :show.sync="del_car_show" hint='确认清空？' title='请确认是否清空商品？' color="#2A71C0" @confirm='confirmCar'>
		</hintPopup>

		<tabbar :value="2"></tabbar>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import wxApplet from '../../../utils/wxApplet/wxApplet.js'
	export default {
		components: {},
		data() {
			return {
				lat_lng: {}, //当前位置经纬度
				goods_list: [], //商品列表
				active_left: 0, //左侧选择标识
				leftscrollinto: '', //左侧锚点标识
				right_active: '', //右侧滚动表示
				rightTop: [], //右侧锚点数组集合

				affirm_show: false, //确认门店信息
				shop_show: false, //门店信息弹窗

				show: false, //购物车弹窗
				cart: { //购物车
					count: 0,
					data: [],
				},
				goods_id: '', //删除商品id
				del_show: false,

				del_car_show: false, //确认清空

			}
		},
		onLoad() {
			

		},
		onShow() {
			this.getUser()
			this.category()
		},
		onReady() {
			this.$nextTick(() => {
				this.init()
			})
		},
		methods: {
			category(e) { //获取分类
				this.$api.category().then(res => {
					if (res.code == 1) {
						this.goods_list = res.data
						if (!e) {
							this.getCity()
						}

					}
				})
			},

			getCity() { //点击获取位置
				wxApplet.getAddressWx().then(res => {
					// console.log(res,'==')
					this.lat_lng = res
					this.shopList(res)
				})
			},

			shopList(e) { //门店列表
				this.$api.shopList({
					lat: e.latitude,
					lng: e.longitude
				}).then(res => {
					if (res.code == 1) {
						this.$store.commit('saveShop', res.data.data[0])
						if (!uni.getStorageSync('Initial')) {
							this.affirm_show = true
							uni.setStorageSync('Initial', true)
						}
						this.cartList()
					}
				})
			},
			navigationTel(e) { //1导航 2打电话
				if (e == 1) {
					uni.openLocation({ //导航
						latitude: Number(this.shop.lat),
						longitude: Number(this.shop.lng),
						name: this.shop.address,
						success: () => {
							console.log('success');
						}
					});
				} else if (e == 2) {
					uni.makePhoneCall({
						phoneNumber: this.shop.mobile //拨打电话
					});
				}
				this.shop_show = false
			},


			cutShop() { //切换门店
				uni.navigateTo({
					url: `/pages/user/classify/cutShop/cutShop?lat=${this.lat_lng.latitude}&lng=${this.lat_lng.longitude}`,
					success: () => {
						this.affirm_show = false
					}
				})
			},
			addGoods(item) { //初始 添加购物车
				console.log(item);
				this.add_cart({
					goods_id: item.id,
					num: 1
				})
			},
			changeGoods(val, item, e) { //步进器
				// console.log(e.value);
				this.add_cart({
					goods_id: val == 1 ? item.id : item.goods_id,
					num: e.value
				})
			},
			add_cart(e) { //添加 删除购物车
				this.$api.add_cart(e).then(res => {
					if (res.code == 1) {
						this.cartList()
					}
					this.del_show = false
					this.$toast.toast(res.msg)
				})
			},


			shopping() { //点击购物车
				this.show = !this.show
			},
			cartList() { //购物车列表
				this.$api.cartList().then(res => {
					if (res.code == 1) {
						this.cart = res.data
						this.category(true)
					}
					this.del_car_show = false
				})
			},

			overlimit(val, item, e) { //步进器加减极限值
				console.log(item, e);
				if (e == 'minus') {
					this.goods_id = val == 1 ? item.id : item.goods_id
					this.del_show = true
				}
			},
			confirm() { //确定删除购物车 - 单删
				this.add_cart({
					goods_id: this.goods_id,
					num: 0
				})
			},
			carGoods() { //清空按钮
				if (this.cart.data.length == 0) {
					this.$toast.toast('你没有需要清空的商品')
					return
				}
				this.del_car_show = true
			},
			confirmCar() { //清空购物车
				this.$api.delCart().then(res => {
					if (res.code == 1) {
						this.cartList()
					}
					this.$toast.toast(res.msg)
				})
			},


			selectLeft(item, index) { //选择左边菜单
				this.right_active = 'floor' + item.id
				this.active_left = index
			},

			scrollright(e) { //右侧滚动
				// console.log(e);
				let scrollTop = e.target.scrollTop

				var index = this.rightTop.findIndex((v) => v > scrollTop)

				if (index != -1) {
					if (index > 6) {
						this.leftscrollinto = 'left' + this.goods_list[index].id
					}
					this.active_left = index

				}
			},
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('#right-item').boundingClientRect(data => {
					// console.log(data);
					if (data) {
						data.map((item, index) => {
							let top = index > 0 ? this.rightTop[index - 1] : 0
							top = top + item.height
							this.rightTop.push(top)
						})
					}
				}).exec();
			},



			clearing() { //结算
				if (this.cart.data.length == 0) {
					this.$toast.toast('请先添加商品')
					return
				}
				// uni.setStorage({
				// 	key: 'shopping_list',
				// 	data: this.cart,
				// 	success: () => {

				// 	}
				// })
				uni.navigateTo({
					url: '/pages/user/classify/submitOrder/submitOrder',
				})
			}
		},
		computed: {
			...mapState({
				identity: state => state.identity,
				shop: state => state.shop,
			}),
			priceAll() {
				let num = 0
				this.cart.data.map(item => {
					console.log(item);
					num += item.num * item.goods.price
				})
				return num.toFixed(2)
			}

		},
		watch: {
			identity: {
				handler(news) {
					// console.log(news, 88);
					if (news) {

					}
				},
				deep: true,
				immediate: true,
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

		.shop_btn {
			width: 148upx;
			height: 52upx;
			border-radius: 40px;
		}
	}

	.left {
		width: 210upx;
	}

	.scroll_content {
		height: calc(100vh - 470upx - env(safe-area-inset-bottom));

	}

	.left_content {
		background: #F4F8FE;
		border-radius: 0px 12upx 0 0px;

		.let_time {
			min-height: 93upx;
			background: #F4F8FE;
			border-radius: 0px 12upx 12upx 0px;
		}

		.let_timea {
			background-color: #fff;
		}
	}

	.balance {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 999;
		bottom: calc(94upx + env(safe-area-inset-bottom));
		height: 100upx;
		background: #FFFFFF;
		box-shadow: 0px -1px 0px 0px #E6E6E6;

		.balance_btn {
			width: 200upx;
			height: 72upx;
			background: #2A71C0;
			border-radius: 36upx;
		}

		.deg {
			right: -14upx;
			top: -14upx;
		}
	}

	.shopp_list {
		position: absolute;
		left: 0;
		z-index: 99;
		bottom: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);

		.shopp_lista {
			position: absolute;
			left: 0;
			bottom: 0;
			padding-bottom: calc(198upx + env(safe-area-inset-bottom));
			background-color: #fff;
			width: 100%;

			.scroll_shop {
				height: 420upx;
			}
		}
	}

	.cut {
		width: 148upx;
		height: 52upx;
		border-radius: 41upx;
	}

	.affirm_btn {
		width: 320upx;
		height: 80upx;
		border-radius: 41upx;
		border: 2upx solid #2A71C0;
	}

	.affirm_btna {
		border: 2upx solid #666666;
	}
</style>
